import React,{useState} from 'react';
import {
    Button,
    Form,
    Input,
    InputNumber,
    Select,
    Switch,
    Card
  } from 'antd';
interface Props{}
type SizeType = Parameters<typeof Form>[0]['size'];
function Set(props:Props) {
    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');

    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
      setComponentSize(size);
    };
  
    return (
        <div>
            <Card title="设置" bordered={false}>
             <Form
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 14 }}
                  layout="horizontal"
                  initialValues={{ size: componentSize }}
                  onValuesChange={onFormLayoutChange}
                  size={componentSize as SizeType}
                  style={{ maxWidth: 600 }}
                >
                  <Form.Item 
                    label="考勤周期"
                    name='week'
                    rules={[{ required: true, message: '' }]}
                    
                  >
                    <Input defaultValue={'从一日开始'} />
                  </Form.Item>
                  <Form.Item label="考勤白名单">
                    <Select defaultValue="普通员工考勤">
                      <Select.Option value="1">普通员工考勤</Select.Option>
                      <Select.Option value="2">中级员工考勤</Select.Option>
                      <Select.Option value="3">高级管理考勤</Select.Option>
                    </Select>
                  </Form.Item>
                  <Form.Item label="打卡提醒" valuePropName="checked">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
                  </Form.Item>
                  <Form.Item label="日折算时长">
                    <InputNumber value={8} /> 小时
                    <InputNumber value={0}/> 分钟 = 1天
                  </Form.Item>
                  <Form.Item label="余额变动提醒" valuePropName="checked">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
                  </Form.Item>
                  <Form.Item >
                    <Button type='primary' htmlType="submit">保存</Button>
                  </Form.Item>
                </Form>
            </Card>
        </div>
    );
}

export default Set;